<template>
  <el-tree-select
    v-model="newv"
    :class="className"
    :placeholder="placeholder || place"
    :data="options ? options : items"
    :props="defaultProps"
    :check-strictly="checkStrictly"
    :clearable="isClearable"
    :disabled="isDisabled"
    @change="$emit('change', $event)"
  />
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
  modelValue: [Object, String, Number, Boolean],
  className: {
    type: String,
    default: "wda-tree-select",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  type: {
    type: Number,
    default: 0,
  },
  options: {
    type: Array,
    default: null,
  },
  valueKey: {
    type: String,
    default: "value",
  },
  initial: {
    type: Boolean,
    default: false,
  },
  isClearable: {
    type: Boolean,
    default: false,
  },
  isDisabled: {
    type: Boolean,
    default: false,
  },
  checkStrictly: {
    type: Boolean,
    default: false,
  },
  args: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:modelValue', 'change']);

// 响应式数据
const items = ref([]);
const place = ref("请选择");

const defaultProps = {
  children: 'children',
  label: 'label',
  value: 'value',
};

const newv = computed({
  get() {
    return props.modelValue === true ? "" : props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});

// 监听 options 属性的变化
watch(() => props.options, (newOptions) => {
  if (props.type === 0) {
    items.value = newOptions;
  }
}, { immediate: true });
</script>

<style scoped>
.wda-tree-select {
  width: 100%;
}
</style> 